<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  // import * as Cesium from 'cesium';
  // import "cesium/Build/Cesium/Widgets/widgets.css";
  // Cesium.Ion.defaultAccessToken =
  //   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZWI4YWQ2Mi0yYzM0LTQ0Y2EtYjY3NC1hYzUzZmNjMjhmZGMiLCJpZCI6NDQyOTgsImlhdCI6MTYxMzgwNjg1MH0.UuWPrbK4dDX1D3tzvNWgUjSgEBvXnlXc08RvVFD452k';

  export default {
    name: "container",
    // mounted() {
    //   new Cesium.Viewer('cesiumContainer')
    // }
    data() {
      return {
        TDU_Key: "0328487a76618ffc7de1cd13f8b7346f", //天地图申请的密钥,
        // //在线天地图影像服务地址(墨卡托投影)
        // TDT_IMG_W: "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        //   "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        //   "&style=default&format=tiles&tk=" +
        //   "0328487a76618ffc7de1cd13f8b7346f",
        // //在线天地图影像中文标记服务(墨卡托投影)
        // TDT_CIA_W: "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        //   "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        //   "&style=default.jpg&tk=" +
        //   "0328487a76618ffc7de1cd13f8b7346f",

        // //在线天地图矢量地图服务(墨卡托投影)
        // TDT_VEC_W: "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        //   "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        //   "&style=default&format=tiles&tk=" +
        //   "0328487a76618ffc7de1cd13f8b7346f",
        // //在线天地图矢量中文标记服务(墨卡托投影)
        // TDT_CVA_W: "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        //   "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        //   "&style=default.jpg&tk=" +
        //   "0328487a76618ffc7de1cd13f8b7346f",
      };
    },
    computed: {
      //在线天地图影像服务地址(墨卡托投影)
      TDT_IMG_W() {
        return ("http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
          "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
          "&style=default&format=tiles&tk=" +
          this.TDU_Key)
      },
      //在线天地图影像中文标记服务(墨卡托投影)
      TDT_CIA_W(){
        return ("http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default.jpg&tk=" + this.TDU_Key)
      } ,

      //在线天地图矢量地图服务(墨卡托投影)
      TDT_VEC_W(){
        return ( "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default&format=tiles&tk=" + this.TDU_Key)
      },
      //在线天地图矢量中文标记服务(墨卡托投影)
      TDT_CVA_W(){
        return ( "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default.jpg&tk=" + this.TDU_Key)
      },

     
    },

    methods: {
      init() {
        const Cesium = this.cesium;
        Cesium.Ion.defaultAccessToken =
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZWI4YWQ2Mi0yYzM0LTQ0Y2EtYjY3NC1hYzUzZmNjMjhmZGMiLCJpZCI6NDQyOTgsImlhdCI6MTYxMzgwNjg1MH0.UuWPrbK4dDX1D3tzvNWgUjSgEBvXnlXc08RvVFD452k";
        const viewer = new Cesium.Viewer("cesiumContainer", {
          //terrainProvider: Cesium.createWorldTerrain()
          imageryProvider: new Cesium.TileMapServiceImageryProvider({
            url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
          }),

          // imageryProvider: new Cesium.OpenStreetMapImageryProvider({
          //   url: "https://a.tile.openstreetmap.org/",
          // }),

          // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          //   url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          // }),

          animation: true, //是否显示动画控件
          //baseLayerPicker: true, //是否显示图层选择控件          // // ArcGIS在线影像底图(只有baseLayerPicker为true时可用)
          //fullscreenButton:true,
          vrButton: true, //vr按钮
          geocoder: true, //是否显示地名查找控件
          //homeButton:true,
          infoBox: true, //是否显示点击要素之后显示的信息
          sceneModePicker: true, //是否显示投影方式控件//二维 <===> 三维切换按钮
          selectionIndicator: true,
          timeline: true, //是否显示时间线控件
          //navigationHelpButton: true, //是否显示帮助信息控件
          //navigationInstructionsInitiallyVisibl:true,
          scene3DOnly: false, //当 时true，每个几何实例将仅以 3D 方式渲染以节省 GPU 内存。
          shouldAnimate: true, //动画自动播放,默认尝试提前模拟时间true 此选项优先于设置Viewer#clockViewModel。
          //clockViewModel
          //selectedImageryProviderViewModel
          //imageryProviderViewModels
          //selectedTerrainProviderViewModel
          //terrainProviderViewModels
          //skyBox//天空
          //skyAtmosphere//大气
          //fullscreenElement//全屏时要置于全屏模式的元素或 ID
          useDefaultRenderLoop: true, //循环渲染
          //targetFrameRate//速率
          //showRenderLoopErrors:true,
          //useBrowserRecommendedResolution:true,
          automaticallyTrackDataSourceClocks: true, //自动追踪数据源时钟
          //contextOptions
          //sceneMode:sceneMode.SCENE3D,
          //mapProjection//投影
          //globe:false,地球仪
          //orderIndependentTranslucency
          //creditContainer
          //creditViewport
          //dataSources
          //shadows
          //terrainShadows
          //mapMode2D
          //projectionPicker: true,//投影部件
          //requestRenderMode: false
          //maximumRenderTimeChange:0.0//最大渲染时间
        });
        viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权

        let Img = new Cesium.WebMapTileServiceImageryProvider({ //调用影像中文服务
          url: this.TDT_IMG_W, //url地址
          layer: "img_w", //WMTS请求的层名称
          style: "default", //WMTS请求的样式名称
          format: "tiles", //MIME类型，用于从服务器检索图像
          tileMatrixSetID: "GoogleMapsCompatible", //	用于WMTS请求的TileMatrixSet的标识符
          //subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7","t8", "t9", "t10", "t11", "t12", "t13", "t14", "t15", "t16", "t17", "t18"],//不能用
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图服务器，替换{s}
          minimumLevel: 0, //最小层级
          maximumLevel: 18, //最大层级
        });
        viewer.imageryLayers.addImageryProvider(Img) //添加到cesium图层上

        let cia = new Cesium.WebMapTileServiceImageryProvider({ //调用影像中文注记服务
          url: this.TDT_CIA_W,
          layer: "cia_w",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "GoogleMapsCompatible",
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图服务器
          minimumLevel: 0,
          maximumLevel: 18,
        });
        viewer.imageryLayers.addImageryProvider(cia) //添加到cesium图层上

        // Create an initial camera view
        var initialPosition = new Cesium.Cartesian3.fromDegrees(113.05, 35.15, 432100);
        var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0.0);
        var homeCameraView = {
          destination: initialPosition,
          orientation: {
            heading: initialOrientation.heading,
            pitch: initialOrientation.pitch,
            roll: initialOrientation.roll
          }
        };
        viewer.scene.camera.setView(homeCameraView); // Set the initial view



      },
    },
    mounted() {
      this.init();
    },
  };
</script>

<style>
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
</style>